
/*
** table of content  start
*/
headers = "h1, h2, h3, h4, h5, h6"

class TableOfContents {
    /*
        The parameters from and to must be Element objects in the DOM.
    */
    constructor({ from, to }) {
        this.fromElement = from;
        this.toElement = to;
        // Get all the ordered headings.
        this.headingElements = this.fromElement.querySelectorAll(headers);
        this.tocElement = document.createElement("div");
    }

    /*
        Get the most important heading level.
        For example if the article has only <h2>, <h3> and <h4> tags
        this method will return 2.
    */
    getMostImportantHeadingLevel() {
        let mostImportantHeadingLevel = 6; // <h6> heading level
        for (let i = 0; i < this.headingElements.length; i++) {
            let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);
            mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ?
                headingLevel : mostImportantHeadingLevel;
        }
        return mostImportantHeadingLevel;
    }

    /*
        Generate a unique id string for the heading from its text content.
    */
    static generateId(headingElement) {
        return headingElement.textContent.replace(/\s+/g, "_");
    }

    /*
        Convert <h1> to 1 … <h6> to 6.
    */
    static getHeadingLevel(headingElement) {
        switch (headingElement.tagName.toLowerCase()) {
            case "h1": return 1;
            case "h2": return 2;
            case "h3": return 3;
            case "h4": return 4;
            case "h5": return 5;
            case "h6": return 6;
            default: return 1;
        }
    }

    generateToc() {
        let currentLevel = this.getMostImportantHeadingLevel() - 1,
            currentElement = this.tocElement;

        for (let i = 0; i < this.headingElements.length; i++) {
            let headingElement = this.headingElements[i],
                headingLevel = TableOfContents.getHeadingLevel(headingElement),
                headingLevelDifference = headingLevel - currentLevel,
                linkElement = document.createElement("a");

            if (!headingElement.id) {
                headingElement.id = TableOfContents.generateId(headingElement);
            }
            linkElement.href = `#${headingElement.id}`;
            linkElement.textContent = headingElement.textContent;

            if (headingLevelDifference > 0) {
                // Go down the DOM by adding list elements.
                for (let j = 0; j < headingLevelDifference; j++) {
                    let listElement = document.createElement("ol"),
                        listItemElement = document.createElement("li");
                    listElement.appendChild(listItemElement);
                    currentElement.appendChild(listElement);
                    currentElement = listItemElement;
                }
                currentElement.appendChild(linkElement);
            } else {
                // Go up the DOM.
                for (let j = 0; j < -headingLevelDifference; j++) {
                    currentElement = currentElement.parentNode.parentNode;
                }
                let listItemElement = document.createElement("li");
                listItemElement.appendChild(linkElement);
                currentElement.parentNode.appendChild(listItemElement);
                currentElement = listItemElement;
            }

            currentLevel = headingLevel;
        }

        this.toElement.appendChild(this.tocElement.firstChild);
    }
}

document.addEventListener("DOMContentLoaded", () =>
    new TableOfContents({
        from: document.querySelector(".main"),
        to: document.querySelector(".table-of-contents")
    }).generateToc()
);


/*
** table of content  end
*/


window.addEventListener('DOMContentLoaded', () => { // DOMContentLoaded start




/*
** IntersectionObserver start
*/

callback = (entries, observer) => {
    entries.forEach(entry => {
        const header = entry.target;
        const headerId = entry.target.getAttribute('id');
        // const navHeaderLink = document.querySelector(`a[href="#${headerId}"]`);
        // const sectionLinkId = sectionLink.href;

        if (entry.intersectionRatio > 0) {
            // alert(entry.intersectionRatio)
            console.log(headerId)
            console.log("entry.intersectionRatio:" + entry.intersectionRatio)
            //   $('#' + headerId).css({'color': 'blue'})
            document.querySelector(`#${headerId}`).classList.add('dynamic_active')
            // 防止整个ol block dynamic_active
            nav = document.querySelector('nav')
            is_nav = document.querySelector(`nav li a[href="#${headerId}"]`).parentNode.parentNode.parentNode.isEqualNode(nav)

            document.querySelector(`nav li a[href="#${headerId}"]`).classList.add('dynamic_active')
            // document.querySelector(`nav li a[href="#${headerId}"]`).parentNode.parentNode.parentNode.firstElementChild.classList.add('dynamic_active')
            //   document.querySelector(`nav li a[href="#${headerId}"]`).parentElement.classList.add('dynamic_active');
            // section.classList.add("visible");
            // return true;
        } else {
            // $('#' + headerId).removeAttr('color')
            document.querySelector(`#${headerId}`).classList.remove('dynamic_active')
            nav = document.querySelector('nav')
            is_nav = document.querySelector(`nav li a[href="#${headerId}"]`).parentNode.parentNode.parentNode.isEqualNode(nav)
            document.querySelector(`nav li a[href="#${headerId}"]`).classList.remove('dynamic_active')
            // document.querySelector(`nav li a[href="#${headerId}"]`).parentNode.parentNode.parentNode.firstElementChild.classList.remove('dynamic_active')
            //   document.querySelector(`nav li a[href="#${headerId}"]`).parentElement.classList.remove('dynamic_active');
            observer.observe(entry.target)
        }
    });
};

const options = {
    // root: document.querySelector('.main'),
    rootMargin: "200px 0px",
    // 当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数
    // threshold: [0, 0.25, 0.5, 0.75, 1],
};

const observer = new IntersectionObserver(callback, options);


// Track all sections that have an `id` applied
document.querySelectorAll(headers).forEach((section) => {
  observer.observe(section);
});

/*
** IntersectionObserver end
*/

}); // DOMContentLoaded end